<template>
  <van-nav-bar title="辣鸡米的旅行导航" />
  <keep-alive>
    <component :is="showPage" />
  </keep-alive>
  <van-tabbar v-model="active" fixed style="z-index: 999;">
    <van-tabbar-item icon="home-o" @click="toPage(1)">首页</van-tabbar-item>
    <van-tabbar-item icon="search" @click="toPage(2)">地图</van-tabbar-item>
    <van-tabbar-item icon="setting-o" @click="toMaster">管理员</van-tabbar-item>
  </van-tabbar>
  <van-popup v-model:show="showLeft" position="left" :style="{ width: '30%', height: '100%' }" />
</template>

<script lang="ts" setup>
import { showDialog } from 'vant';
import { provide, ref, shallowRef } from 'vue';
import BaiduMapVue from './views/BaiduMap.vue';
import HomeViewVue from './views/HomeView.vue';

const showLeft = ref(false);
const active = ref(0);
const showPage = shallowRef(HomeViewVue)
const toPage = (index: number) => {
  if (index == 1) {
    showPage.value = HomeViewVue;
  }
  if (index == 2)
    showPage.value = BaiduMapVue;
  active.value = index - 1;
}

const map = ref('1');
const markerList = ref([]);
provide("map", map);//传输地图
provide("markerList", markerList);//传输marker列表
provide("toPage", toPage);
const toMaster = () => {
  showDialog({
    title: '警告',
    message: '无权限访问。',
  }).then(() => {
    // on close
  });
}
</script>
